$(document).ready(function() {
    // 显示错误信息函数
    function showError(field, message) {
        $('#' + field + '-error').text(message).show();
        $('#' + field).addClass('invalid');
    }
    
    // 清除错误信息函数
    function clearError(field) {
        $('#' + field + '-error').hide().text('');
        $('#' + field).removeClass('invalid');
    }
    
    // 验证IP地址格式
    function validateIP(ip) {
        if (ip === 'localhost') {
            return true;
        }
        var ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/;
        if (!ipPattern.test(ip)) {
            return false;
        }
        var parts = ip.split('.');
        for (var i = 0; i < parts.length; i++) {
            var part = parseInt(parts[i]);
            if (isNaN(part) || part < 0 || part > 255) {
                return false;
            }
        }
        return true;
    }
    
    // 验证端口号
    function validatePort(port) {
        var portNum = parseInt(port);
        return !isNaN(portNum) && portNum >= 1 && portNum <= 65535;
    }
    
    // 表单字段失去焦点时进行验证
    $('#ip').blur(function() {
        var ip = $(this).val().trim();
        if (ip === '') {
            showError('ip', '请输入主机IP');
        } else if (!validateIP(ip)) {
            showError('ip', '请输入有效的IP地址或localhost');
        } else {
            clearError('ip');
        }
    });
    
    $('#port').blur(function() {
        var port = $(this).val().trim();
        if (port === '') {
            showError('port', '请输入端口号');
        } else if (!validatePort(port)) {
            showError('port', '端口号必须是1-65535之间的数字');
        } else {
            clearError('port');
        }
    });
    
    $('#username').blur(function() {
        var username = $(this).val().trim();
        if (username === '') {
            showError('username', '请输入用户名');
        } else {
            clearError('username');
        }
    });
    
    $('#password').blur(function() {
        var password = $(this).val().trim();
        if (password === '') {
            showError('password', '请输入密码');
        } else {
            clearError('password');
        }
    });
    
    // 表单提交事件
    $('#loginForm').submit(function(e) {
        e.preventDefault();
        
        // 清除之前的所有错误信息
        $('.error-message').hide().text('');
        $('input').removeClass('invalid');
        
        // 获取表单数据
        var ip = $('#ip').val().trim();
        var port = $('#port').val().trim();
        var username = $('#username').val().trim();
        var password = $('#password').val().trim();
        
        // 验证数据
        var isValid = true;
        
        if (ip === '') {
            showError('ip', '请输入主机IP');
            isValid = false;
        } else if (!validateIP(ip)) {
            showError('ip', '请输入有效的IP地址或localhost');
            isValid = false;
        }
        
        if (port === '') {
            showError('port', '请输入端口号');
            isValid = false;
        } else if (!validatePort(port)) {
            showError('port', '端口号必须是1-65535之间的数字');
            isValid = false;
        }
        
        if (username === '') {
            showError('username', '请输入用户名');
            isValid = false;
        }
        
        if (password === '') {
            showError('password', '请输入密码');
            isValid = false;
        }
        
        // 如果所有验证通过，提交表单
        if (isValid) {
            alert('登录信息验证通过，正在提交...');
            // 这里可以取消注释下面一行来实际提交表单
            // this.submit();
        }
    });
});